lookingGlass: Turn toolbar icons into actual buttons

Yes, we can use reactive icons with a `button-press-event` handler,
but really, there's a standard control for that kind of behavior ...

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2156>

diff --git a/js/ui/lookingGlass.js b/js/ui/lookingGlass.js
index ed217a4dbb365f16dc766862a46169a0721940c2..acf4758cbda3b157278e6e0a73e1132413e575ee 100644 (file)
--- a/js/ui/lookingGlass.js
+++ b/js/ui/lookingGlass.js
@@ -1264,11 +1264,15 @@ class LookingGlass extends St.BoxLayout {
 
         let toolbar = new St.BoxLayout({ name: 'Toolbar' });
         this.add_actor(toolbar);
-        let inspectIcon = new St.Icon({ icon_name: 'find-location-symbolic',
-                                        icon_size: 24 });
-        toolbar.add_actor(inspectIcon);
-        inspectIcon.reactive = true;
-        inspectIcon.connect('button-press-event', () => {
+        const inspectButton = new St.Button({
+            style_class: 'lg-toolbar-button',
+            child: new St.Icon({
+                icon_name: 'find-location-symbolic',
+                icon_size: 24,
+            }),
+        });
+        toolbar.add_actor(inspectButton);
+        inspectButton.connect('clicked', () => {
             let inspector = new Inspector(this);
             inspector.connect('target', (i, target, stageX, stageY) => {
                 this._pushResult('inspect(%d, %d)'.format(Math.round(stageX), Math.round(stageY)), target);
@@ -1281,21 +1285,25 @@ class LookingGlass extends St.BoxLayout {
             return Clutter.EVENT_STOP;
         });
 
-        let gcIcon = new St.Icon({ icon_name: 'user-trash-full-symbolic',
-                                   icon_size: 24 });
-        toolbar.add_actor(gcIcon);
-        gcIcon.reactive = true;
-        gcIcon.connect('button-press-event', () => {
-            gcIcon.icon_name = 'user-trash-symbolic';
+        const gcButton = new St.Button({
+            style_class: 'lg-toolbar-button',
+            child: new St.Icon({
+                icon_name: 'user-trash-full-symbolic',
+                icon_size: 24,
+            }),
+        });
+        toolbar.add_actor(gcButton);
+        gcButton.connect('clicked', () => {
+            gcButton.child.icon_name = 'user-trash-symbolic';
             System.gc();
             this._timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 500, () => {
-                gcIcon.icon_name = 'user-trash-full-symbolic';
+                gcButton.child.icon_name = 'user-trash-full-symbolic';
                 this._timeoutId = 0;
                 return GLib.SOURCE_REMOVE;
             });
             GLib.Source.set_name_by_id(
                 this._timeoutId,
-                '[gnome-shell] gcIcon.icon_name = \'user-trash-full-symbolic\''
+                '[gnome-shell] gcButton.child.icon_name = \'user-trash-full-symbolic\''
             );
             return Clutter.EVENT_PROPAGATE;
         });